<template>
	<div class="header" v-if="api">
		<el-form class="head" :model="api" size="medium" label-position="left" label-width="80px">
			<formUrl :info="api.info"></formUrl>
			<el-form-item label="简介">
				<el-input v-model="api.info.explain"></el-input>
			</el-form-item>
			<el-form-item label="版本">
				<div style="display: flex; align-items: center">
					<el-input v-model="api.info.version"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="更新时间">
				<el-input v-model="api.info.lastUpdate"></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import formUrl from './url.vue'
	export default {
		components: {
			formUrl
		},
		props: {
			api: {
				type: Object,
			},
			apis: {
				type: Array,
			},
		},
		model: ["api"],
		data() {
			return {

			}
		},
		methods: {
			upTime(){
				let t = new Date()
				this.api.info.lastUpdate = t.toLocaleDateString() + ' ' + t.toTimeString().slice(0, 8)
			}
		},
		watch:{
			api:{
				deep: true,
				handler(val){
					this.upTime()
				}
			}
		}
	};
</script>

<style scoped>
	.header {}

	.head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
</style>
